<template>
  <div class="circle-container">
    <div class="bai-gan"></div>
    <div class="yuanpan">
      <div class="circle-img"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useAudio } from "@/hooks/useAudio";
const { paused } = useAudio();
const props = withDefaults(
  defineProps<{
    size?: number;
  }>(),
  {}
);
const size = computed(() => {
  if (props.size === void 0) {
    return "90%";
  }
  return props.size + "px";
});
const height = computed(() => {
  if (props.size === void 0) {
    return "320px";
  }
  return props.size + 90 + "px";
});
const pauseStyle = computed(() => {
  return paused.value ? "paused" : "runing";
});
const rotateStyle = computed(() => {
  return paused.value ? "-70deg" : "-32deg";
});
</script>
<style scoped lang="scss">
.circle-container {
  position: relative;
  width: v-bind(size);
  height: v-bind(height);
}
.bai-gan {
  width: 10px;
  height: 100px;
  background-color: #fff;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(v-bind(rotateStyle));
  transform-origin: center 10px;
  z-index: 10;
  transition: transform 1s ease-in-out;
  border-radius: 10px;
  &::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background-color: #000;
    border-radius: 6px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-2.5px);
  }
}
.yuanpan {
  width: v-bind(size);
  height: v-bind(size);
  background: black;
  margin-top: 60px;

  position: relative;
  border-radius: 50%;
  // 旋转动画
  animation: rotate 240s linear infinite;
  // 暂停时添加暂停样式
  animation-play-state: v-bind(pauseStyle);
  .circle-img {
    width: 68%;
    height: 68%;

    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    @apply rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;

    &::after {
      content: "";
      display: block;
      width: 94%;
      height: 94%;
      @apply rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-circle-img bg-cover bg-no-repeat;
    }
  }
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: repeating-radial-gradient(
        circle at center,
        transparent 0px,
        /* 圈颜色 */ #000 3px,
        /* 每圈宽度 */ transparent 3px,
        transparent 1px
      ),
      conic-gradient(
        transparent 0% 0%,
        rgba(255, 255, 255, 0.35) 14% 15%,
        transparent 50% 50%,

        rgba(255, 255, 255, 0.35) 64% 65%,
        transparent 100% 100%
      );
  }
}

// 旋转动画
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
